import React, { Component } from 'react';
import { SearchBar } from 'antd-mobile';
import 'common/components/search.less';
import BookItem from 'common/components/bookItem.js';
import * as bookinfoApi from 'common/api/bookinfo.js';

/**
 * 搜索组件
 */
class Search extends Component{
	
	constructor(props) {
	    super(props);
	    
	    this.state = {
	    	keywords: '',
	    	autoCompleteArrays: [],
	    	books: []
	    }
	}
	
	//左上角返回事件
	backHandle = () => {
		window.history.back();
	}
	
	//自动补全搜索事件
	searchAutoComplete = (item) => {
		//设置input值为选中的keywords
		this.autoFocusInst.setState({
			value: item,
		});
		
		//查询搜索内容，并设置keywords
		//清空自动补全内容
		bookinfoApi.bookSearch({
			keywords: this.state.keywords
		}).then(result => {
			this.setState({
				keywords: item,
				autoCompleteArrays: [],
				books: result.data.books
			})
		})
	}
	
	//右上角搜索事件
	searchClick = () => {
		if(this.state.keywords && this.state.keywords != ""){
			//查询搜索内容，并设置keywords
			//清空自动补全内容
			bookinfoApi.bookSearch({
				keywords: this.state.keywords
			}).then(result => {
				this.setState({
					autoCompleteArrays: [],
					books: result.data.books
				})
			})
		}else{
			this.setState({
				keywords: '',
				books: [],
				autoCompleteArrays: []
			})
		}
	}
	
	//搜索关键字改变事件
	onChange = (keywords) => {
		if(keywords && keywords != ""){
			bookinfoApi.bookSearchAutoComplete({
				keywords: keywords 
			}).then(result => {
				if(result && result.returnCode == "SUCCESS"){
					this.setState({
						books: [],
						keywords: keywords,
						autoCompleteArrays: result.data.keywords
					})
					
				}
			})
		}else{
			this.setState({
				keywords: '',
				books: [],
				autoCompleteArrays: []
			})
		}
	}
	
	componentDidMount(){
		//search输入框自动焦点
		this.autoFocusInst.setState({
			focus: true,
			focused: true
		});
	}
	
	render(){
		return(
			<div className="search">
				<div className="search_top">
					<div className="search_top_left fl">
						<img src="assets/img/back.png" onClick={this.backHandle}/>
					</div>
					<div className="search_top_right fr">
						<span onClick={this.searchClick}>搜索</span>
					</div>
					<div className="search_top_center">
						<SearchBar 
							ref={ref => this.autoFocusInst = ref}
							placeholder="Search" 
							cancelText="" 
							maxLength={8}
							onChange={this.onChange}/>
					</div>
				</div>
				<ul className="search_auto_complete">
					{
						this.state.autoCompleteArrays && this.state.autoCompleteArrays.length > 0 &&
						this.state.autoCompleteArrays.map((item, index) => {
							return(
								<li key={index} onClick={() => this.searchAutoComplete(item)}>
									<span>{item}</span>
								</li>
							)
						})
					}
				</ul>
				<ul className="search_content">
					{
						this.state.books && this.state.books.length > 0 &&
						this.state.books.map((book, index) => {
							return(
								<BookItem key={index} book={book}></BookItem>
							)
						})
					}
				</ul>
			</div>
		)
	}
}

export default Search;